
<script>
//导入axios
import axios from 'axios';
export default {
// 默认数据
  data() {
    return {
      // 博客列表数据
      blogs: [],
      // 当前页码
      currentPage: 1,
      // 总记录数
      total: 0,
      // 每页显示的记录数
      pageSize: 5
    };
  },
  methods: {
    // 获取指定页码的博客数据
    page(currentPage) {
      const _this = this;
      // 发送 GET 请求获取博客数据
      axios.get(`http://localhost:8080/api/blogs`).then((res) => {
        console.log(res.data); // 打印返回的数据
        _this.blogs = res.data.blogs; // 更新博客列表数据
        _this.total = res.data.total; // 更新总记录数
      });
    },
    editBlog(blog){
      //TODO

    },
    deleteBlog(id){
      //TODO
      try {
        axios.delete(`http://localhost:8080/api/blogs/${id}`);
        // 成功删除后更新本地博客列表，移除已删除的文章
        this.blogs = this.blogs.filter(blog => blog.id !== id);
        this.total--; // 减少总记录数
        alert('Blog deleted successfully');
      } catch (error) {
        console.error('Error deleting blog:', error);
        if (error.response && error.response.status === 404) {
          this.error = 'Blog not found';
        } else {
          this.error = 'Failed to delete blog';
        }
        alert(this.error);
      }
    }
  },
  // 组件挂载后执行的方法
  mounted() {
    this.page(this.currentPage); // 初始化时获取第一页数据
  }

}

</script>

<template>
  <!-- 主容器，设置宽度和居中 -->
  <div class="m-container">
    <!-- 博客内容块 -->
    <div class="block">
      <!-- 循环遍历 blogs 数组 -->
      <div v-for="blog in blogs" :key="blog.id">
        <h3>{{ blog.title }}</h3>
        <p>{{ blog.content }}</p>
<!--        <button @click="editBlog(blog)">Edit</button>-->
        <button @click="deleteBlog(blog.id)">Delete</button>
      </div>
      <h4>
        当前是第：{{currentPage}}页，每页{{pageSize}}篇,共{{total}}篇
      </h4>
    </div>
  </div>
</template>

<style scoped>

</style>
